﻿<%@ Page Title="Image Resizing Sample" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="image-resize.aspx.cs" Inherits="Dala.Samples.Image_Resizing.image_resizing" %>
<%@ Register Src="~/User-Controls/message-display/message-display.ascx" TagName="MsgDisplay" TagPrefix="uc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
    function CreateNewFileUploader() {
        var newUploader = '<div class="">' +
                              '<div>' +
                              '</div><div>' +
                              '<input class="classes" type="file" id="fuImageAdditional" name="fuImageAdditional[]" />' +
                              '&nbsp;<a href="javascript:void(0);" onclick="RemoveFileUploader(this);" class="btn-button btn-grey">Remove</a>' +
                              '</div>' +
                              '</div>';
        $("#fileUploadContainer").append(newUploader);
    }

    function RemoveFileUploader(elem) {
        var $divContainer = $(elem).parent().parent();
        $divContainer.remove();
    }


</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

   <div>

      <uc:MsgDisplay ID="ucMsgDisplay" runat="server" />
    
    <fieldset>
    <div>
    
      <strong>Default Image :</strong><br />
        <asp:FileUpload ID="fluDefaultImage" runat="server" />
    </div>
    <br />
    <div> 
     <strong>Additional Image :</strong>
     <br />
        <input type="file" id="fuImageAdditional" name="fuImageAdditional[]" />
         <div id="fileUploadContainer"></div>
        <input type="button" class="btn-button btn-black" href="javascript:void(0);" onclick="CreateNewFileUploader();" value="Add More" />
     </div>
     <div>
        <asp:Button ID="btnUploadImages" runat="server" Text="Upload Image"  onclick="btnUploadImages_Click" />
     </div>

     </fieldset>
    </div>

    <div></div>
    <br />

    <div>
     <fieldset> Message display with same user control using JavaScript
     <div></div>
     <br />
     <label> Email: </label><br />
     <div>
        <asp:TextBox ID="txtEmail" runat="server" CssClass="textEntry dummy-required dummy-email" InputName="Email"></asp:TextBox>
     </div>
     <br />
     <label> Name: </label><br />
     <div>
        <asp:TextBox ID="txtName" runat="server" CssClass="textEntry dummy-required" InputName="Name"></asp:TextBox>
     </div>
     <br />

     <div>
        <asp:Button ID="btnSave" runat="server" Text="Save"  OnClientClick="javascript:return ExecuteValidation();" onclick="btnSave_Click" />
     </div>
     <br />
     
     </fieldset>
    
    </div>

</asp:Content>
